<template>
  <div class="onebox">
    <el-form
      ref="elForm"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="100px"
      label-position="left"
    >
      <el-form-item label="元数据名" prop="name" class="formList1">
        <el-input
          v-model="formData.name"
          placeholder="请输入元数据名"
          clearable
          :style="{ width: '95%' }"
          :disabled="inputStatus == 0"
          @focus="isRemind1 = false"
        ></el-input>
        <span class="remind1" v-show="isRemind1 && inputStatus != 0"
          >元数据名不可重复</span
        >
      </el-form-item>
      <el-form-item label="元数据标识" prop="label" class="formList1">
        <el-input
          v-model="formData.label"
          placeholder="请输入元数据标识"
          clearable
           maxlength="255"
           show-word-limit
          :style="{ width: '95%' }"
          :disabled="inputStatus == 0"
          @focus="isRemind2 = false"
        >
        </el-input>
        <span class="remind1" v-show="isRemind2 && inputStatus != 0"
          >由字母、数字和下划线组成，与元数据名含义相同，不可重复，保存后不可修改</span
        >
      </el-form-item>
      <el-form-item label="模块" prop="moduleName">
        <el-select
          v-model="formData.moduleName"
          placeholder="请选择模块"
          clearable
          :style="{ width: '95%' }"
          :disabled="inputStatus == 0"
        >
          <el-option
            :label="'+ 新建模块'"
            :value="'creat'"
            class="newoptionLsit1"
            style="textAlign: center"

          ></el-option>
          <el-option
            v-for="(item, index) in modelList"
            :key="index"
            :label="item.moduleName"
            :value="item.moduleName"
            style="
              textAlign: center;
              width: 93%;
              margin: 0 auto;
              height: 40px;
              lineHeight: 40px;
            "
            class="optionList"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label-width="0"
        prop="checkList"
        v-if="inputStatus == 2"
        class="newcheckout1"
      >
        <span class="describe1">子表在其他元数据中以表格的形式展示</span>
        <span class="describe2">单例只有一条记录，没有关联的表</span>
        <el-checkbox-group v-model="formData.checkList">
          <el-checkbox
            label="子表"
            :disabled="formData.checkList.includes('单例') ? true : false"
          ></el-checkbox>
          <el-checkbox
            label="单例"
            :disabled="formData.checkList.includes('子表') ? true : false"
          ></el-checkbox>

          <el-checkbox
            label="内部"
            :disabled="formData.checkList.includes('第三方') ? true : false"
          ></el-checkbox>

          <el-checkbox
            label="第三方"
            :disabled="formData.checkList.includes('内部') ? true : false"
          ></el-checkbox>
        </el-checkbox-group>
      </el-form-item>


      <el-form-item
        label-width="0"
        prop="checkList"
        class="newcheckout1"
        v-else
      >
        <span class="describe1">子表在其他元数据中以表格的形式展示</span>
        <span class="describe2">单例只有一条记录，没有关联的表</span>
        <el-checkbox-group v-model="AllcheckList">
          <el-checkbox
            label="子表"
            :checked="formData.isSingle == 0 ? true : false"
            :disabled="
              inputStatus == 0 || AllcheckList.includes('单例') ? true : false
            "
          ></el-checkbox>

          <el-checkbox
            label="单例"
            :checked="formData.isTable == 0 ? true : false"
            :disabled="
              inputStatus == 0 || AllcheckList.includes('子表') ? true : false
            "
          ></el-checkbox>

          <el-checkbox
            label="内部"
            :checked="formData.isThirdParty == 1 ? true : false"
            :disabled="
              inputStatus == 0 || AllcheckList.includes('第三方') ? true : false
            "
          ></el-checkbox>

          <el-checkbox

            label="第三方"
            :checked="formData.isInner == 1 ? true : false"
            :disabled="
              inputStatus == 0 || AllcheckList.includes('内部') ? true : false
            "
          ></el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="描述" prop="description">
        <el-input
          v-model="formData.description"
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 4 }"
          placeholder="请输入描述"
          :style="{ width: '95%' }"
          :disabled="inputStatus == 0"
        ></el-input>
      </el-form-item>
    </el-form>
    <!-- 新增模块  -->
    <createMoudle
      :dialogflag="dialogVisible"
      v-if="dialogVisible"
      @closedia="closedia"
    ></createMoudle>
    <div v-if="inputStatus == 1" slot="footer">
      <el-button type="primary" @click="preservation" class="dialog-footer"
        >保存</el-button
      >
    </div>
  </div>
</template>
<script>
import { getModuleList, editMetadataInfo } from "@/api/metadata/metadata";
import createMoudle from "./dialog/createMoudle.vue";
export default {
  components: {
    createMoudle,
  },
  props: {
    allList: {
      type: Object,
    },
  },
  data() {
    const validatorName = (rule, value, callback) => {
      // var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[A-Za-z_][A-Za-z_0-9]{0,}$/;
      var reg = /^(?!_)[a-zA-Z0-9_\u4e00-\u9fa5]+$/;
      var regnum = /^[0-9].*$/;
      if (!value) {
        return callback("请输入元数据标识");
      } else {
        // setTimeout(() => {
        if (!reg.test(value)) {
          callback(new Error("只含有汉字、数字、字母、下划线,不能以下划线开头"));
        } else if (regnum.test(value)) {
          callback(new Error("不能以数字开头!"));
        } 
        else {
          callback();
        }
        // }, 100);
      }
    };
    const validatorLabel = (rule, value, callback) => {
      // var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[A-Za-z_][A-Za-z_0-9]{0,}$/;
      var reg = /^[a-zA-Z0-9_]+$/;
      var regnum = /^[0-9].*$/;
      var regline=/^([a-zA-Z])[a-z0-9]*$/i;
      if (!value) {
        return callback("请输入元数据标识");
      } else {
        // setTimeout(() => {
        if (!reg.test(value)) {
          callback(new Error("只能由字母、数字和下划线组成 "));
        } else if (regnum.test(value)) {
          callback(new Error("不能以数字开头!"));
        } else if (!regline.test(value)) {
          callback(new Error("只能由字母开头!"));
        }
        else {
          callback();
        }
        // }, 100);
      }
    };
    return {
      //0---查看  1--编辑
      inputStatus: "",
      //form的数据
      formData: {
        name: "",
        label: "",
        moduleName: "",
        checkList: [],
        description: "",
      },
      queryParams: {},
      rules: {
        name: [
          {
            required: true,
           validator: validatorName,
            trigger: "blur",
          },
        ],
        label: [
          {
            required: true,
            validator: validatorLabel,
            trigger: "blur",
          },
        ],
        moduleName: [
          {
            required: true,
            message: "请选择模块",
            // trigger: "change",
          },
        ],
      },
      //模块的数据
      modelList: [],
      AllcheckList: [],
      dialogVisible: false,
      isRemind1: true, //第一个提示
      isRemind2: true, //第二个提示
    };
  },
  computed: {},
  watch: {
    "formData.moduleName": function (val) {
      if (val === "creat") {
        this.dialogVisible = true;
        this.formData.moduleName = "";
      }
    },
  },
  created() {},
  mounted() {
    if (localStorage.getItem("status") == 2) {
      this.inputStatus = localStorage.getItem("status");
    } else {
      this.inputStatus = this.allList.status;
    }
    if (this.inputStatus != 2) {
      //不是新建元数据
      this.formData = this.allList.info;
      //请求的数据做一下区分
      this.queryParams = this.allList.info;

      if (this.allList.info.isTable == 0) {
        this.AllcheckList.push("子表");
      }
      if (this.allList.info.isSingle == 0) {
        this.AllcheckList.push("单例");
      }
      if (this.allList.info.isInner == 1) {
        this.AllcheckList.push("内部");
      }
      if (this.allList.info.isThirdParty == 1) {
        this.AllcheckList.push("第三方");
      }
      this.$nextTick(() => {
        this.formData.checkList = [].concat(this.AllcheckList);
      });
    }
    //挂载以后立即加载模块的列表
    this.getModulesList();
  },
  methods: {
    getModulesList() {
      getModuleList()
        .then((response) => {
          this.modelList = response.data;
        })
        .catch((err) => {
          // this.$message.error(err.message);
          console.log(err);
        });
    },
    //关闭新增模块弹框
    closedia() {
      this.dialogVisible = false;
      this.getModulesList();
    },
    validateForm() {
      let flag = false;
      this.isRemind1 = false;
      this.isRemind2 = false;
      this.$refs.elForm.validate((valid) => {
        flag = valid;
      });
      return flag;
    },
    //保存
    preservation() {
      // this.queryParams.modified = "";
      this.formData.checkList = this.AllcheckList;
      let both =
        this.AllcheckList.indexOf("子表") != -1 &&
        this.AllcheckList.indexOf("单例") != -1;
      let mustone =
        this.AllcheckList.indexOf("内部") != -1 ||
        this.AllcheckList.indexOf("第三方") != -1;
      let bintwo =
        this.AllcheckList.indexOf("内部") != -1 &&
        this.AllcheckList.indexOf("第三方") != -1;
      if (both || !mustone || bintwo) {
        if (both) {
          //二者都有
          this.$message.error('"子表”和“单例”只能二选一或都不选');
        } else {
          //一个没有 或者选了两个
          this.$message.error("“内部”和“第三方”只能二选一");
        }
      } else {
        for (var checkList in this.queryParams) {
          delete this.queryParams.checkList;
        }
        console.log(this.AllcheckList, "this.AllcheckList");
        if (this.AllcheckList.indexOf("子表") == -1) {
          this.queryParams.isTable = 1;
        } else if (this.AllcheckList.indexOf("单例") == -1) {
          this.queryParams.isSingle = 1;
        } else if (this.AllcheckList.indexOf("内部") == -1) {
          this.queryParams.isInner = 0;
        } else if (this.AllcheckList.indexOf("第三方") == -1) {
          this.queryParams.isThirdParty = 0;
        }

        if (this.AllcheckList.indexOf("子表") != -1) {
          this.queryParams.isTable = 0;
        } else if (this.AllcheckList.indexOf("单例") != -1) {
          this.queryParams.isSingle = 0;
        } else if (this.AllcheckList.indexOf("内部") != -1) {
          this.queryParams.isInner = 1;
        } else if (this.AllcheckList.indexOf("第三方") != -1) {
          this.queryParams.isThirdParty = 1;
        }
        console.log(this.queryParams, "aaaaaaaa");
        editMetadataInfo(this.queryParams)
          .then((response) => {
            if (response.success) {
              this.$modal.msgSuccess("修改成功");
              this.$router.push("/metadata/metadataList");
            }
          })
          .catch((err) => {
            // this.$message.error(err.message);
            console.log(err);
          });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";
.onebox {
  width: 56%;
  margin: 40px auto 30px;
}
.dialog-footer {
  width: 122px;
  height: 40px;
  background-color: $labelColor;
  color: #fff;
  font-size: 16px;
  margin-left: 100px;
  border-color: #e8eaec;
  border-radius: 4px;
}
.el-checkbox-group {
  width: 100%;
}
::v-deep .newcheckout1 {
  width: 100%;
  margin-bottom: 0 !important;
}

.el-checkbox {
  width: calc(87% / 2);
  position: relative;
}
.describe1 {
  display: block;
  font-size: 10px;
  color: #b3bdc6;
  position: absolute;
  top: -20px;
  left: 23%;
}
.describe2 {
  display: block;
  font-size: 10px;
  color: #b3bdc6;
  position: absolute;
  top: -20px;
  left: 71%;
}
.el-form-item {
  margin-bottom: 50px;
}
.newoptionLsit1 {
  width: 93%;
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
  color: $labelColor;
  border: 1px solid $labelColor;
  padding: 0 !important;
  border-radius: 4px;
}
::v-deep .el-textarea__inner {
  min-height: 60px !important;
}
::v-deep .el-checkbox-group {
  margin-left: 100px;
  margin-top: -20px;
}
::v-deep .el-checkbox {
  margin-bottom: 30px;
}
::v-deep .el-checkbox__inner {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
::v-deep .is-checked .el-checkbox__inner {
  background-color: #fff !important;
}
::v-deep .is-checked .el-checkbox__inner::after {
  background: $labelColor ;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  top: 3.5px !important;
  left: 3.5px !important;

}
::v-deep .is-checked .el-checkbox__label {
  color: $labelColor;
}
.formList1 {
  position: relative;
}
.remind1 {
  font-size: 12px;
  position: absolute;
  bottom: -40px;
  left: 0px;
  color: #abb7c0;
}
.optionList:nth-child(2n + 1) {
  background: #f2f6fc;
  border-radius: 4px;
}
// .hover{
//   background-color:rgba(255, 255, 255, 0)!important;
// }
</style>
